<template>
    <div style="height: 100%;  background-color: #f1f1f1;">
        <header class="hd">
            <span style="padding: 0 .2415rem;" @click="router.go(-1)">返回</span>
            <span>详情</span>
            <span style="padding: 0 .2415rem;"></span>
        </header>
        <div class="hidden">
            <span style="padding: 0 .2415rem;">返回</span>
            <span>详情</span>
            <span style="padding: 0 .2415rem;"></span>
        </div>
        <main>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span class="top-left">
                            <img :src="avatarUrl" alt="">
                            <span style="font-size: .4348rem;margin-left: .2415rem;">{{ username }}</span>
                        </span>
                        <span>{{ timer }}</span>
                    </div>
                </template>
                <div class="text item">
                    <div>
                        <div style="text-align: center; font-weight: bold;font-size: .4831rem;">{{ title }}</div>
                        <div style="overflow-wrap: break-word;">
                            {{ content }}</div>
                        <div class="imgList">
                            <div class="imgItem" v-for="(item, index) in imgUrl" :key="index">
                                <img :src="item">
                            </div>


                        </div>
                        <div class="icon">
                            <!-- 点赞 -->
                            <span class="iconfont icon-24px" @click="addLikeNum">
                                <span class="num">{{ likeNum }}</span>
                            </span>
                            <!-- 隔离 -->
                            <span style="margin: 0 .2415rem;"></span>
                            <!-- 评论 -->
                            <span class="iconfont icon-pinglun" @click="commentInput.focus()"></span>
                        </div>
                        <hr>
                        <div class="commentInput">
                            <img :src="myAvatarUrl" alt="">
                            <input type="text" ref="commentInput" placeholder="说点什么吧" v-model="commentUserInfo.comment">
                            <el-button type="success" @click="commitComment" :icon="Check" circle
                                style="margin-left: .1449rem;" />
                        </div>
                        <!-- 评论区列表 -->
                        <div class="commentList" v-for="item in commentarr.data" :key="id">
                            <div class="userinfo">
                                <img :src="item.commentAvatarUrl" alt="">
                                <div class="commentinfo">
                                    <span style="font-size: .1932rem;font-weight: bold;">{{ item.commentUsername }}</span>
                                    <span style="font-size: .1932rem;">{{ item.comment }}</span>
                                </div>
                            </div>
                            <span>{{ item.createdAt }}</span>
                        </div>

                    </div>
                </div>
            </el-card>
        </main>
    </div>
</template>

<script setup>
import { Check } from '@element-plus/icons-vue'
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { queryByArticleId, getgetcomments, commit_comment,commitLikeNumber } from '@/api/index'
import { ElMessage } from 'element-plus'
const route = useRoute();
const router = useRouter();
let commentInput = ref();
// 点击点赞按钮
let addLikeNum =async () => {
   let data = await commitLikeNumber(route.query.id,formData.articleObj.likeNum++);
   console.log(data);
};
let formData = reactive({
    articleObj: {
        content_img: '',
        likeNum: 0
    }
});
// 计算发布这个文章的人的头像url
let avatarUrl = computed(() => formData.articleObj.user ? formData.articleObj.user.avatarUrl : '');
let username = computed(() => formData.articleObj.user ? formData.articleObj.user.username : '');
let timer = computed(() => formData.articleObj.user ? formData.articleObj.createdAt : '');
let title = computed(() => formData.articleObj.user ? formData.articleObj.title : '');
let content = computed(() => formData.articleObj.user ? formData.articleObj.content : '');
let imgUrl = computed(() => formData.articleObj.content_img ? JSON.parse(formData.articleObj.content_img) : "");
let likeNum = computed(() => formData.articleObj.likeNum);
// 获取自己的头像地址
let myAvatarUrl = computed(() => JSON.parse(localStorage.getItem('userInfo'))[0].avatarUrl);
let commentUserInfo = reactive({
    aid: 0,
    username: JSON.parse(localStorage.getItem('userInfo'))[0].username,
    comment: '',
    commentAvatar: JSON.parse(localStorage.getItem('userInfo'))[0].avatarUrl
})
// 提交评论
let commitComment = async () => {
    console.log(commentUserInfo.comment.trim() == '');
    if (commentUserInfo.comment.trim() == '') {
        ElMessage({
            showClose: true,
            message: '评论不能为空！',
            type: 'error',
        });
        return;
    }
    let data = await commit_comment(commentUserInfo.aid, commentUserInfo.username, commentUserInfo.comment, commentUserInfo.commentAvatar);
    console.log(data);
    if (data.status == 200) {
        ElMessage({
            showClose: true,
            message: '评论成功！',
            type: 'success',
        });
        commentUserInfo.comment='';
        getcommentList(commentUserInfo.aid);
    }
};
let commentarr=reactive({
    data:[]
})
// 获取评论列表
let getcommentList = async (aid) => {
    let data = await getgetcomments(aid);
    console.log(data);
    commentarr.data=data.data.data
};
onMounted(async () => {
    //console.log('3.-组件挂载到页面之后执行-------onMounted')
    let res = await queryByArticleId(route.query.id);
    commentUserInfo.aid = route.query.id;
    formData.articleObj = res.data.data[0]
    // 获取评论列表
    getcommentList(route.query.id);
});

</script>
<style scoped lang='css'>
.hd {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-size: .4348rem;
    background-color: #fff;
    padding: .2415rem;
    margin-bottom: .2415rem;
}

.hidden {
    /* display: none; */
    display: flex;
    justify-content: space-between;
    font-size: .4348rem;
    background-color: #fff;
    padding: .2415rem;
    margin-bottom: .2415rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: .3382rem;
}

.item {
    margin-bottom: .4348rem;
}

.box-card {
    width: 100%;
}

.top-left {
    display: flex;
    align-items: center;
}

.top-left img {
    width: 1.4493rem;
    height: 1.4493rem;
    border-radius: 50%;
}

.imgList {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: .2415rem;
}

.imgItem {
    width: 33%;
    display: flex;
    align-items: center;
}

.imgItem img {
    width: 100%;
    /* height: 100%; */
}

.imgItem:nth-child(2) {
    margin: 0 .1208rem;
}

.icon {
    display: flex;
    justify-content: flex-end;
    margin-top: .3623rem;
}

.icon-24px,
.icon-pinglun {
    position: relative;
    font-size: .7246rem;
}

.num {
    position: absolute;
    top: -5px;
    left: .1208rem;
    transform: translateX(120%);
    font-size: .3899rem;
}

.commentInput {
    width: 100%;
    margin-top: .1208rem;
    display: flex;
    align-items: center;
}

.commentInput img,
.commentList img {
    width: .6831rem;
    height: .6831rem;
    border-radius: 50%;
    margin-right: .1932rem;
}

.commentInput input {
    border: 0;
    width: 100%;
    background-color: #f1f1f1;
    padding: .2415rem;
    border-radius: .1208rem;
}

.commentInput input::placeholder {
    color: #ccc;

}

.commentList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .3623rem;
}

.userinfo {
    display: flex;
    align-items: center;
}

.commentinfo {
    display: flex;
    flex-direction: column;

}
</style>